<template>
   <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
            <el-steps :active="1" process-status="wait" align-center style="marginbottom:
                    40px;">
                    <el-step title="填写课程基本信息" icon="el-icon-edit"></el-step>
                    <el-step title="创建课程大纲" icon="el-icon-upload"></el-step>
                    <el-step title="最终发布" icon="el-icon-picture"></el-step>
            </el-steps>

        <el-form label-width="120px">
           <el-form-item label="课程标题">
               <el-input v-model="courseInfo.title"  placeholder=" 示例：机器学习项目课：从基础到搭建项目视"></el-input>              
           </el-form-item>

        <!-- 所属课程分类 TODO -->
        <!-- 一级分类 -->
        <el-form-item label="课程一级分类">
            <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="请选择" @change="subjectLevelOneChanged">   <!-- 这里面的方法已经封装好了等同于subjectLevelOneChanged(this.value) -->
                <el-option
                v-for="subject in subjectOneList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>

            <!-- 二级分类 -->
       
         <el-select v-model="courseInfo.subjectId" placeholder="请选择">
            <el-option
              v-for="subject in subjectTwoList"
              :key="subject.value"
              :label="subject.title"
              :value="subject.id"/>
         </el-select>
        </el-form-item>

        
       
        <!-- 课程讲师 -->
        <el-form-item label="课程讲师">
           <el-select
              v-model="courseInfo.teacherId"
              placeholder="请选择">
            <el-option
              v-for="teacher in teacherList"
              :key="teacher.id"
              :label="teacher.name"
              :value="teacher.id"/>
           </el-select>
        </el-form-item>
       

        <el-form-item label="总课时">
           <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>  
        </el-form-item>

        <!-- 课程简介 TODO -->
        <!-- 课程简介-->
        <el-form-item label="课程简介">
            <tinymce :height="300" v-model="courseInfo.description"/>
        </el-form-item>

        <!-- 课程封面 TODO -->
         <!-- 课程封面-->
         <!-- :show-file-list="false" 显示文件列表 ，auto_uplaod自动上传，不写默认使用自动上传，-->
          <el-form-item label="课程封面">
                <el-upload
                  :show-file-list="false"    
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :action="BASE_API+'/eduoss/fileoss/file'"
                  class="avatar-uploader">
                  <img :src="courseInfo.cover">
              </el-upload>
          </el-form-item>


        <el-form-item label="课程价格">
          <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"  placeholder="免费课程请设置为0元"/> 元
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
      </el-form>


   </div>
</template>

<script>
import course from '@/api/edu/course.js'
import subject from '@/api/edu/subject.js'
import Tinymce from '@/components/Tinymce'  //引入富文本编辑框

  export default {
    components: { Tinymce }, //声明富文本
        data() {
           return {
                  saveBtnDisabled: false ,// 保存按钮是否禁用
                  courseInfo:{  
                      title: '',  
                      subjectId: '',  //课程类别二级分类ID
                      subjectParentId:'',//课程类别一级分类ID
                      teacherId: '',  
                      lessonNum: 0,  
                      description: '',
                      cover: '/static/03.jpg',
                      price: 0
                  },
                  courseId:'',
                  teacherList:{},
                  subjectOneList:{},
                  subjectTwoList:{},
                  BASE_API: process.env.BASE_API, // 接口API地址

                  }
              },
        created() {
          //获取路由id值
            if(this.$route.params && this.$route.params.id ){
            this.courseId  = this.$route.params.id
            //调用根据id查询课程的方法
            this.getInfo()
        }
             //初始化所有讲师
            this.showAllTeacher();
            //初始化一级分类
            this.getAllSubjectList();
           //每次点添加清空下数据
            this.courseInfo= {  
                      title: '',  
                      subjectId: '',  //课程类别二级分类ID
                      subjectParentId:'',//课程类别一级分类ID
                      teacherId: '',  
                      lessonNum: 0,  
                      description: '',
                      cover: '/static/03.jpg',
                      price: 0
                  }
           
            

        },
        methods: {
             //返回上一步，修改课程信息并提交
             updateCourse(){
              course.updateCourseInfo(this.courseInfo)
              .then(response=>{
                  this.$message({   
                    type: 'success',
                    message: '修改成功!'
                               })
              
              })
             },
           
             //根据课程ID查询
             getInfo(){
               course.getCourseInfoId(this.courseId)
               .then(response=>{
                this.courseInfo = response.data.courseInfoVo
                //查询一二级课程分类
              //这里是解决返回修改的时候，二级分类不显示数据问题，因为查询返回的对象里面不包含二级课程分类的名称信息。
                subject.getSubjectList() //这个方法要从新调用一遍是因为，在返回的时候要填充数据时，在created方法里面还没初始化数据，，
                .then(response=>{  
                  this.subjectOneList = response.data.list
                  for(let i= 0;i<this.subjectOneList.length;i++){
                    if(this.courseInfo.subjectParentId === this.subjectOneList[i].id){
                      this.subjectTwoList = this.subjectOneList[i].children

                    }

                  }
                  })
                })
                 
             //初始化所有讲师，回显的类只有讲师ID
              this.showAllTeacher()
               
             },

          //上传成功后调用的方法
            handleAvatarSuccess(res,file){
              //console.log(res)// 上传响应
              //console.log(URL.createObjectURL(file.raw))// 显示base64编码
               this.courseInfo.cover = res.data.url
            },
           // 上传之前调用验证的方法
           beforeAvatarUpload(file){   //固定写法
             const isJPG = file.type === 'image/jpeg'
              const isLt2M = file.size / 1024 / 1024 < 2
              if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!')
                          }
              if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!')
                           }
              return isJPG && isLt2M
           },

          //通过点击某个一级分类，触发change事件，显示对应的二级分类 ,获取一级分类ID的方法就是直接在方法上面写value就行了，框架已经封装好了
          subjectLevelOneChanged(value){ 
            //value的值就是当前一级分类选择时候触发的值，分类id
            //下面遍历所有的一级分类，如果当前触发的一级分类id等于遍历的id，就把这个一级分类的children值赋值给subjectTwoList集合
            for(var i= 0 ;i< this.subjectOneList.length ;i++){
                   //每一个一级分类                       
                   var oneSubject = this.subjectOneList[i]
                   //判断：所有一级分了是否等于当前下拉框选择的已经分类ID 如果是就把该以及分类的子二级分类赋予给subjectTwoList集合                   
                  if(value===oneSubject.id){
                    this.subjectTwoList = oneSubject.children   //这里不是上面的subjectOneList集合，，是每一个oneSubject。别搞错了
                    this.courseInfo.subjectId=''  //把二级分类id值清空 ,因为上面显示有value默认就显示，选择的label才会显示名称，并更改value值
                  }
                
            }
          },
          saveOrUpdate(){
            if(this.$route.params && this.$route.params.id ){
              this.updateCourse()
             }else{
               this.addCourse() 
             }
              

          },
          //添加课程    (跳转到第二步)
            addCourse() {
              course.addCourseInfo(this.courseInfo)
              .then(response =>{
                    this.$message({   //提示
                    type: 'success',
                    message: '添加课程信息成功!' 
                               })
                this.$router.push({ path: '/course/chapter/'+ response.data.courseId })//跳转到第二步
              })     
                  },

              //修改课程
             updateCourse(){
              course.updateCourseInfo(this.courseInfo)
              .then(response=>{
                  this.$message({   
                    type: 'success',
                    message: '修改成功!'
                               })
                 this.$router.push({ path: '/course/chapter/'+ this.courseId })//跳转到第二步
              
              })
             },
          showAllTeacher(){ //获取所有的讲师列表，放在上面的下拉框进行遍历
            course.getAllTeacher()
            .then(response=>{
              this.teacherList =  response.data.items
            })

          },
          getAllSubjectList() {  //获取所有的课程分类列表，这里面包含了一级和二级分类
            subject.getSubjectList()
            .then(response=>{
               this.subjectOneList = response.data.list
               
            })

          }
      
                }
                 }
</script>
<style scoped>
.tinymce-container {
line-height: 29px;
}
</style>